import React, { useEffect, useState} from 'react'
import { useNavigate, useParams } from 'react-router';
import Board from './Board'
import { Button } from '@chakra-ui/react';

export default function Game() {
    const [history, setHistory] = useState([Array(9).fill(null)]);
    const [currentMove, setCurrentMove] = useState(0); // 当前历史数组索引
    const currentSquares = history[currentMove];
    const xIsNext = currentMove % 2 === 0
    const navigate = useNavigate()
    // const [ getParams ,setParam] = useSearchParams()
    const params = useParams()
    const aa = undefined
  
    function handlePlay(nextSquares) {
        // nextSquares 最新的数组
        const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
        setHistory(nextHistory);
        setCurrentMove(nextHistory.length - 1);
    }

    function jumpTo(nextMove) {
      console.log('nextMove', nextMove);
      setCurrentMove(nextMove);
    }

    const moves = history.map((squares, move) => {
        let description
        if (move > 0) {
            description = 'Go to move #' + move
        }else {
            description = 'Go to game start'
        }
        return (
            <li  key={move}>
                <button onClick={() => jumpTo(move)}>{description}</button>
            </li>
        )
    })

    useEffect(() => {
      console.log(params);
    },[aa])
  
    return (
      <div className="game">
        <div className="game-board">
          <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
        </div>
        <div className="game-info">
          <ol>{moves}</ol>
        </div>
        <Button onClick={() => { navigate('/event/1/abc')}}>去捉老鼠</Button>
        <Button onClick={() => { navigate('/')}}>返回上一页</Button>
      </div>
    )
}
